<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填报流程审核</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            width: 100%;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
        }

        .header {
            background-color: white;
            padding: 20px 25px;
            border-bottom: 1px solid #e9ecef;
            border-left: 4px solid #67c23a;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #2c3e50;
            margin: 0;
            font-size: 24px;
            font-weight: 500;
        }

        .header p {
            color: #666;
            margin: 10px 0 0 0;
            font-size: 14px;
        }

        .table-section {
            padding: 25px;
        }

        .audit-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;
        }

        .status-pending {
            color: #e6a23c;
            background-color: #fdf6ec;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-review {
            color: #409eff;
            background-color: #ecf5ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-completed {
            color: #67c23a;
            background-color: #f0f9ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .deadline-overdue {
            color: #f56c6c;
            font-weight: bold;
        }

        .deadline-today {
            color: #e6a23c;
            font-weight: bold;
        }

        .deadline-future {
            color: #67c23a;
        }

        .deadline-info {
            font-size: 11px;
            color: #909399;
            margin-top: 2px;
        }

        .main-content {
            margin-top: 0;
        }

        .tab-section {
            background-color: white;
            padding: 0 25px;
            border-bottom: 1px solid #e9ecef;
        }

        .tab-label {
            font-size: 14px;
            font-weight: 500;
        }

        .tab-badge {
            margin-left: 8px;
        }

        .el-tabs__item {
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
        }

        .user-tag {
            color: #606266;
            background-color: #f4f4f5;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .division-tag {
            color: #409eff;
            background-color: #ecf5ff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .bu-tag {
            color: #67c23a;
            background-color: #f0f9ff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 4px;
        }

        .responsible-user {
            font-weight: 500;
            color: #2c3e50;
        }

        .proxy-user {
            color: #909399;
            font-size: 12px;
            margin-left: 8px;
        }

        .month-highlight {
            font-weight: 500;
            color: #409eff;
        }

        .audit-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .priority-high {
            color: #f56c6c;
            font-weight: bold;
        }

        .priority-medium {
            color: #e6a23c;
        }

        .priority-low {
            color: #909399;
        }

        /* Iframe Modal Styles */
        .iframe-modal .el-dialog {
            margin: 20px auto;
        }

        .iframe-modal .el-dialog__body {
            padding: 0;
            height: 70vh;
        }

        .iframe-modal .el-dialog__header {
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .iframe-modal .el-dialog__title {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
        }

        .audit-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }

        .iframe-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80vh;
            background-color: #f8f9fa;
            color: #666;
            font-size: 14px;
        }

        .iframe-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 80vh;
            background-color: #fef0f0;
            color: #f56c6c;
            font-size: 14px;
        }

        .iframe-error i {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .dialog-footer .el-button {
            margin: 0 8px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            min-width: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main-content">
            <div class="container">
                <!-- 页面标题 -->
                <div class="header">
                    <h1>📋 填报流程审核</h1>
                    <p>管理和审核各部门的填报流程，包括待审核、待提交和已完成的流程</p>
                </div>

                <!-- Tab切换 -->
                <div class="tab-section">
                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="待审核" name="review">
                            <span slot="label">
                                <span class="tab-label">🔍 待审核</span>
                                <el-badge :value="reviewCount" class="tab-badge" v-if="reviewCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="待提交" name="pending">
                            <span slot="label">
                                <span class="tab-label">📝 待提交</span>
                                <el-badge :value="pendingCount" class="tab-badge" v-if="pendingCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="已完成" name="completed">
                            <span slot="label">
                                <span class="tab-label">✅ 已完成</span>
                                <el-badge :value="completedCount" class="tab-badge"
                                    v-if="completedCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <!-- 审核表格 -->
                <div class="table-section">
                    <div class="audit-table">
                        <el-table :data="filteredReports" border style="width: 100%" v-loading="loading">
                            <el-table-column prop="division" label="Division" width="120" align="center">
                                <template slot-scope="scope">
                                    <span class="division-tag">{{ scope.row.division }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="bu" label="BU" width="100" align="center">
                                <template slot-scope="scope">
                                    <span class="bu-tag">{{ scope.row.bu }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="taskName" label="任务名称" min-width="200" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="viewReport(scope.row)">{{ scope.row.taskName
                                        }}</el-link>
                                </template>
                            </el-table-column>

                            <el-table-column prop="month" label="月份" width="140" align="center">
                                <template slot-scope="scope">
                                    <span class="month-highlight">{{ scope.row.month }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="publishTime" label="发布时间" width="140" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.publishTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="publisher" label="发布人" width="100" align="center">
                                <template slot-scope="scope">
                                    <span class="user-tag">{{ scope.row.publisher }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="任务状态" width="100" align="center">
                                <template slot-scope="scope">
                                    <span :class="getStatusClass(scope.row.status)">
                                        {{ getStatusText(scope.row.status) }}
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="deadline" label="截止时间" width="160" align="center" sortable>
                                <template slot-scope="scope">
                                    <div>
                                        <div :class="getDeadlineClass(scope.row.deadline)">
                                            {{ formatDate(scope.row.deadline) }}
                                        </div>
                                        <div class="deadline-info">
                                            {{ getDeadlineInfo(scope.row.deadline) }}
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="responsible" label="责任人" width="120" align="center">
                                <template slot-scope="scope">
                                    <span class="responsible-user">{{ scope.row.responsible }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="proxy" label="代理人" width="120" align="center">
                                <template slot-scope="scope">
                                    <span class="proxy-user">{{ scope.row.proxy || '-' }}</span>
                                </template>
                            </el-table-column>

                            <!-- 条件显示的时间列 -->
                            <el-table-column v-if="activeTab === 'review'" prop="submitTime" label="提交时间" width="140"
                                align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.submitTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column v-if="activeTab === 'completed'" prop="completeTime" label="完成时间"
                                width="140" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.completeTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="260" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <div class="audit-actions">
                                        <el-button size="mini" type="primary"
                                            @click="viewReport(scope.row)">查看</el-button>

                                        <!-- 待审核状态的操作 -->
                                        <template v-if="activeTab === 'review' && scope.row.status === 'review'">
                                            <el-button size="mini" type="success" @click="approveReport(scope.row)">
                                                通过
                                            </el-button>
                                            <el-button size="mini" type="danger" @click="rejectReport(scope.row)">
                                                拒绝
                                            </el-button>
                                        </template>

                                        <!-- 待提交状态的操作 -->
                                        <template v-if="activeTab === 'pending' && scope.row.status === 'pending'">
                                            <el-button size="mini" type="warning" @click="remindSubmit(scope.row)">
                                                提醒
                                            </el-button>
                                        </template>

                                        <!-- 已完成状态的操作 -->
                                        <template v-if="activeTab === 'completed' && scope.row.status === 'completed'">
                                            <el-button size="mini" type="info" @click="downloadReport(scope.row)">
                                                下载
                                            </el-button>
                                        </template>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <div style="padding: 20px; text-align: right;">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="totalReports">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Iframe审核弹窗 -->
        <el-dialog :title="'具体审核页面 - ' + currentReportName" :visible.sync="iframeModalVisible" width="95%" top="5vh"
            class="iframe-modal" :before-close="handleCloseIframeModal" :close-on-click-modal="false">

            <!-- Iframe内容 -->
            <iframe ref="auditIframe" :src="iframeSrc" class="audit-iframe" @load="handleIframeLoad">
            </iframe>

            <!-- Dialog Footer with Action Buttons -->
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="approveFromDialog">通过</el-button>
                <el-button type="danger" @click="rejectFromDialog">拒绝</el-button>
                <el-button type="primary" @click="saveDataFromDialog">保存数据</el-button>
                <el-button @click="cancelDialog">取消</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    currentPage: 1,
                    pageSize: 10,
                    totalReports: 0,
                    activeTab: 'review',
                    // Iframe modal related
                    iframeModalVisible: false,
                    iframeLoading: false,
                    iframeError: false,
                    iframeSrc: '',
                    currentReportName: '',

                    reports: [
                        {
                            id: 1,
                            division: 'Technology',
                            bu: 'IT',
                            taskName: '2025年第一季度技术KPI填报',
                            month: '2025-01',
                            publishTime: '2025-01-01T10:00:00',
                            publisher: 'Tech Manager',
                            status: 'review',
                            deadline: '2025-01-31T23:59:59',
                            responsible: '张三',
                            proxy: '李四',
                            submitTime: '2025-01-15T14:30:00',
                            completeTime: null
                        },
                        {
                            id: 2,
                            division: 'Sales',
                            bu: 'B2B',
                            taskName: '2025年销售预测报告',
                            month: '2025-02',
                            publishTime: '2025-01-15T14:30:00',
                            publisher: 'Sales Director',
                            status: 'review',
                            deadline: '2025-02-15T23:59:59',
                            responsible: '王五',
                            proxy: null,
                            submitTime: '2025-01-20T16:45:00',
                            completeTime: null
                        },
                        {
                            id: 3,
                            division: 'Finance',
                            bu: 'FP&A',
                            taskName: '2024年年度财务总结',
                            month: '2024-12',
                            publishTime: '2024-12-01T09:00:00',
                            publisher: 'CFO',
                            status: 'pending',
                            deadline: '2024-12-31T23:59:59',
                            responsible: '赵六',
                            proxy: '钱七',
                            submitTime: null,
                            completeTime: null
                        },
                        {
                            id: 4,
                            division: 'HR',
                            bu: 'Talent',
                            taskName: '2024年Q4人力资源报告',
                            month: '2024-12',
                            publishTime: '2024-11-15T16:20:00',
                            publisher: 'HR Director',
                            status: 'pending',
                            deadline: '2024-12-20T23:59:59',
                            responsible: '孙八',
                            proxy: null,
                            submitTime: null,
                            completeTime: null
                        },
                        {
                            id: 5,
                            division: 'Operations',
                            bu: 'Supply Chain',
                            taskName: '2024年供应链优化报告',
                            month: '2024-11',
                            publishTime: '2024-10-20T11:45:00',
                            publisher: 'Ops Manager',
                            status: 'completed',
                            deadline: '2024-11-30T23:59:59',
                            responsible: '周九',
                            proxy: '吴十',
                            submitTime: '2024-11-10T13:20:00',
                            completeTime: '2024-11-15T10:30:00'
                        },
                        {
                            id: 6,
                            division: 'Marketing',
                            bu: 'Digital',
                            taskName: '2024年Q3市场分析报告',
                            month: '2024-10',
                            publishTime: '2024-09-25T13:15:00',
                            publisher: 'Marketing Lead',
                            status: 'completed',
                            deadline: '2024-10-15T23:59:59',
                            responsible: '郑十一',
                            proxy: null,
                            submitTime: '2024-10-08T11:00:00',
                            completeTime: '2024-10-12T15:45:00'
                        },
                        {
                            id: 7,
                            division: 'Technology',
                            bu: 'R&D',
                            taskName: '2025年技术发展规划',
                            month: '2025-01',
                            publishTime: '2024-12-15T08:30:00',
                            publisher: 'CTO',
                            status: 'review',
                            deadline: '2025-01-20T23:59:59',
                            responsible: '王十二',
                            proxy: '李十三',
                            submitTime: '2025-01-18T09:15:00',
                            completeTime: null
                        },
                        {
                            id: 8,
                            division: 'Quality',
                            bu: 'QA',
                            taskName: '流程质量改进报告',
                            month: '2025-01',
                            publishTime: '2025-01-05T15:45:00',
                            publisher: 'Quality Manager',
                            status: 'pending',
                            deadline: '2025-01-25T23:59:59',
                            responsible: '张十四',
                            proxy: null,
                            submitTime: null,
                            completeTime: null
                        },
                        {
                            id: 9,
                            division: 'Legal',
                            bu: 'Compliance',
                            taskName: '2024年合规审计报告',
                            month: '2024-12',
                            publishTime: '2024-11-30T12:00:00',
                            publisher: 'Legal Counsel',
                            status: 'completed',
                            deadline: '2024-12-28T23:59:59',
                            responsible: '李合规',
                            proxy: '王法务',
                            submitTime: '2024-12-20T14:30:00',
                            completeTime: '2024-12-23T16:20:00'
                        }
                    ]
                }
            },

            computed: {
                filteredReports() {
                    let filtered = this.reports;

                    // 按Tab状态筛选
                    if (this.activeTab === 'pending') {
                        filtered = filtered.filter(report => report.status === 'pending');
                    } else if (this.activeTab === 'review') {
                        filtered = filtered.filter(report => report.status === 'review');
                    } else if (this.activeTab === 'completed') {
                        filtered = filtered.filter(report => report.status === 'completed');
                    }

                    this.totalReports = filtered.length;
                    return filtered;
                },

                pendingCount() {
                    return this.reports.filter(report => report.status === 'pending').length;
                },

                reviewCount() {
                    return this.reports.filter(report => report.status === 'review').length;
                },

                completedCount() {
                    return this.reports.filter(report => report.status === 'completed').length;
                }
            },

            mounted() {
                this.totalReports = this.reports.length;

                // 监听来自 iframe 的消息
                window.addEventListener('message', (event) => {
                    // 验证消息来源（可选）
                    if (event.data && typeof event.data === 'object') {
                        this.handleIframeMessage(event.data);
                    }
                });
            },

            methods: {
                formatDate(dateString) {
                    if (!dateString) return '-';
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },

                getStatusClass(status) {
                    switch (status) {
                        case 'pending':
                            return 'status-pending';
                        case 'review':
                            return 'status-review';
                        case 'completed':
                            return 'status-completed';
                        default:
                            return '';
                    }
                },

                getStatusText(status) {
                    switch (status) {
                        case 'pending':
                            return '待提交';
                        case 'review':
                            return '待审核';
                        case 'completed':
                            return '已完成';
                        default:
                            return '未知';
                    }
                },

                getDeadlineClass(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return 'deadline-overdue';
                    } else if (diffDays === 0) {
                        return 'deadline-today';
                    } else {
                        return 'deadline-future';
                    }
                },

                getDeadlineInfo(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return `已逾期 ${Math.abs(diffDays)} 天`;
                    } else if (diffDays === 0) {
                        return '今日截止';
                    } else {
                        return `剩余 ${diffDays} 天`;
                    }
                },

                handleTabClick(tab) {
                    this.currentPage = 1;
                    this.$message.info(`切换到${tab.label.replace(/[🔍📝✅]/g, '').trim()}`);
                },

                viewReport(report) {
                    this.currentReportName = report.taskName;
                    this.iframeSrc = './multi-package-audit.html';
                    this.iframeLoading = true;
                    this.iframeError = false;
                    this.iframeModalVisible = true;

                    // setTimeout(() => {
                    //     this.$refs.auditIframe.src = this.iframeSrc
                    // }, 100)
                },

                approveReport(report) {
                    this.$confirm(`确定要通过"${report.taskName}"的审核吗？`, '审核通过', {
                        confirmButtonText: '确定通过',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        // 更新报告状态为已完成
                        report.status = 'completed';
                        report.completeTime = new Date().toISOString();
                        this.$message.success(`报告"${report.taskName}"审核通过`);
                    }).catch(() => {
                        this.$message.info('已取消审核');
                    });
                },

                rejectReport(report) {
                    this.$prompt('请输入拒绝原因', '审核拒绝', {
                        confirmButtonText: '确定拒绝',
                        cancelButtonText: '取消',
                        inputValidator: (value) => {
                            if (!value || value.trim() === '') {
                                return '请输入拒绝原因';
                            }
                            return true;
                        },
                        inputErrorMessage: '拒绝原因不能为空'
                    }).then(({ value }) => {
                        // 更新报告状态为待提交
                        report.status = 'pending';
                        report.submitTime = null;
                        this.$message.warning(`报告"${report.taskName}"已拒绝，原因：${value}`);
                    }).catch(() => {
                        this.$message.info('已取消拒绝操作');
                    });
                },

                remindSubmit(report) {
                    this.$confirm(`确定要提醒"${report.responsible}"提交报告吗？`, '发送提醒', {
                        confirmButtonText: '发送提醒',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message.success(`已向"${report.responsible}"发送提醒通知`);
                    }).catch(() => {
                        this.$message.info('已取消发送提醒');
                    });
                },

                downloadReport(report) {
                    this.$message.success(`正在下载报告："${report.taskName}"`);
                    // 这里可以实现实际的下载功能
                },

                handleSizeChange(val) {
                    this.pageSize = val;
                },

                handleCurrentChange(val) {
                    this.currentPage = val;
                },

                // Iframe modal methods
                handleIframeLoad() {
                    this.iframeLoading = false;
                    this.iframeError = false;
                },

                handleCloseIframeModal() {
                    this.iframeModalVisible = false;
                    this.iframeSrc = '';
                    this.currentReportName = '';
                    this.iframeLoading = false;
                    this.iframeError = false;
                },

                sendDataToIframe() {
                    if (this.$refs.auditIframe && this.$refs.auditIframe.contentWindow) {
                        const reportData = {
                            type: 'AUDIT_DATA',
                            reportInfo: {
                                taskName: this.currentReportName,
                                timestamp: new Date().toISOString()
                            }
                        };

                        try {
                            this.$refs.auditIframe.contentWindow.postMessage(reportData, '*');
                        } catch (error) {
                            console.warn('发送数据到 iframe 失败:', error);
                        }
                    }
                },

                handleIframeMessage(data) {
                    switch (data.type) {
                        case 'AUDIT_APPROVED':
                            this.$message.success(`审核通过：${data.taskName || this.currentReportName}`);
                            // 更新本地报告状态
                            this.updateReportStatus(data.reportId, 'completed');
                            break;

                        case 'AUDIT_REJECTED':
                            this.$message.warning(`审核拒绝：${data.taskName || this.currentReportName}`);
                            if (data.reason) {
                                this.$message.info(`拒绝原因：${data.reason}`);
                            }
                            // 更新本地报告状态
                            this.updateReportStatus(data.reportId, 'pending');
                            break;

                        case 'DATA_SAVED':
                            this.$message.success('审核数据已保存');
                            break;

                        case 'IFRAME_READY':
                            // iframe 已准备好，可以发送数据
                            this.sendDataToIframe();
                            break;

                        default:
                            console.log('收到 iframe 消息:', data);
                    }
                },

                updateReportStatus(reportId, newStatus) {
                    const report = this.reports.find(r => r.id === reportId);
                    if (report) {
                        report.status = newStatus;
                        if (newStatus === 'completed') {
                            report.completeTime = new Date().toISOString();
                        } else if (newStatus === 'pending') {
                            report.submitTime = null;
                        }
                    }
                },

                // Dialog footer button methods
                approveFromDialog() {
                    this.$confirm('确定要通过当前审核吗？', '审核通过', {
                        confirmButtonText: '确定通过',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        // 向 iframe 发送通过指令
                        this.sendMessageToIframe({
                            type: 'APPROVE_AUDIT',
                            from: 'parent'
                        });
                        this.$message.success('审核通过指令已发送');
                    }).catch(() => {
                        this.$message.info('已取消审核');
                    });
                },

                rejectFromDialog() {
                    this.$prompt('请输入拒绝原因', '审核拒绝', {
                        confirmButtonText: '确定拒绝',
                        cancelButtonText: '取消',
                        inputValidator: (value) => {
                            if (!value || value.trim() === '') {
                                return '请输入拒绝原因';
                            }
                            return true;
                        },
                        inputErrorMessage: '拒绝原因不能为空'
                    }).then(({ value }) => {
                        // 向 iframe 发送拒绝指令
                        this.sendMessageToIframe({
                            type: 'REJECT_AUDIT',
                            reason: value,
                            from: 'parent'
                        });
                        this.$message.warning(`审核拒绝指令已发送，原因：${value}`);
                    }).catch(() => {
                        this.$message.info('已取消拒绝操作');
                    });
                },

                saveDataFromDialog() {
                    this.$confirm('确定要保存当前数据吗？', '保存数据', {
                        confirmButtonText: '确定保存',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        // 向 iframe 发送保存指令
                        this.sendMessageToIframe({
                            type: 'SAVE_DATA',
                            from: 'parent'
                        });
                        this.$message.success('保存数据指令已发送');
                    }).catch(() => {
                        this.$message.info('已取消保存');
                    });
                },

                cancelDialog() {
                    this.$confirm('确定要关闭审核窗口吗？未保存的数据将丢失', '关闭窗口', {
                        confirmButtonText: '确定关闭',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.handleCloseIframeModal();
                    }).catch(() => {
                        this.$message.info('已取消关闭');
                    });
                },

                sendMessageToIframe(message) {
                    if (this.$refs.auditIframe && this.$refs.auditIframe.contentWindow) {
                        try {
                            this.$refs.auditIframe.contentWindow.postMessage(message, '*');
                        } catch (error) {
                            console.warn('发送消息到 iframe 失败:', error);
                            this.$message.error('与审核页面通信失败');
                        }
                    } else {
                        this.$message.error('审核页面未加载完成');
                    }
                }
            }
        });
    </script>
</body>

</html>